<script setup>
import {onMounted, ref, watch} from "vue";
import {callIosMethodPay, callIosMethodPayVip, callIosMethoExit, numberData, toIos} from "/@/utils/hooks";
import {monthlyCardSignIn, signIn} from "/@/api";
import qs from "qs";
import {Toast} from "vant";

const bb = ref(2);

let dayData = ref(
  [
    {
      type: true,
      day: "100",
    },
    {
      type: true,
      day: "100",
    },
    {
      type: false,
      day: "100",
    },
    {
      type: false,
      day: "100",
    },
    {
      type: false,
      day: "100",
    },
    {
      type: false,
      day: "100",
    },
    {
      type: false,
      day: "100",
    },
  ]
)
// let timeData = ref(["一", "二", "三", "四", "五", "六", "七",'八','九','十','十一','','','','','','']);

let show = ref(false)

function aa() {
  console.log(bb.value, "bb");
}

function showPopup() {
  show.value = true;
}

let popupToggle = ref(false)

//弹窗取消
function popupShow() {
  console.log('取消弹窗')
  popupToggle.value = false
}

//是否是月卡会员
let vip_toggle = ref()
//当前签到数
let sign_ = ref(0)
//今日是否签到
let today_is_ = ref(false)
// 已经领取
let claimed = ref(0)
// 待领取
let toBeClaimed = ref(0)

function submitMoneyChange() {
  console.log(moneyIdParams.value)
  // const data = {
  //   type: 1,
  //   product_id: moneyIdParams.value.product_id,
  //   price: String(moneyIdParams.value.discount_price)
  // }

  const data = `{\"type\":1,\"product_id\":${moneyIdParams.value.product_id},\"price\":\"${String(moneyIdParams.value.discount_price)}\"}`
  callIosMethodPay(data)

  time.value = setInterval(async () => {
    if (vip_toggle.value === false) {
      await initPage()
    } else {
      clearInterval(time.value)
    }
  }, 3000)

}

//id 和 金额
const moneyIdParams = ref()

const dayDataPayload = ref()

async function initPage() {
  loadingShow.value=true
  const data = {
    type: 2
  }
  const res = await monthlyCardSignIn(data)
  console.log(res, 'res')
  if (res.code === 200) {
    loadingShow.value=false
    const {
      vip_sign_pay,
      vip_sign_expire,
      reward_list,
      is_yueka_vip,
      sign_num,
      today_is_signed,
      vip_sign_get,
      vip_sign_noget
    } = res.data

    dayData.value = reward_list;
    //是否月卡
    vip_toggle.value = is_yueka_vip;
    sign_.value = sign_num;
    //今日是否签到
    today_is_.value = today_is_signed;
    claimed.value = vip_sign_get;
    toBeClaimed.value = vip_sign_noget;
    moneyIdParams.value = vip_sign_pay
    expireDate.value = vip_sign_expire

    dayDataPayload.value = dayData.value.filter((item) => {
      return item.is_signed === true
    })

    console.log(dayDataPayload.value, 'dayDataPayload')
    //是否月卡
    if (vip_toggle) {
      clearInterval(time.value)
      //今日是否签到
      if (!today_is_.value) {
        // const res = await signIn({})
        // console.log(res, 'res签到')
        // popupToggle.value = true
      }
      // daysLeft.value = daysUntilExpire(expireDate.value);
      // console.log(daysLeft.value, 'daysLeft')
    }
  }else{
    loadingShow.value=false
     Toast({
      message: res.msg,
      position: 'top',
    });
  }
}

let loadingShow = ref(false)
const daysLeft = ref(0)

function daysUntilExpire(expireDate) {
  // 获取当前日期和到期日期
  const currentDate = new Date();
  const expirationDate = new Date(expireDate); // 假设到期日期为2022年12月31日
// 计算剩余天数
  const timeDiff = expirationDate.getTime() - currentDate.getTime();
  const remainingDays = Math.ceil(timeDiff / (1000 * 3600 * 24)); // 将总毫秒数转换为天数并向上取整
// 显示剩余天数
  console.log(`距离到期时间还有 ${remainingDays} 天`);
  return parseInt(String(remainingDays))
}

// 使用示例
const expireDate = ref(0); // 到期日期字符串

// 关闭界面
function leftBack() {
  const str = "{\"type\":3}"
  callIosMethoExit(str)
}


watch(() => vip_toggle.value, async (newValue) => {
  console.log('count发生了改变', newValue);
});
onMounted(async () => {
  await initPage()
})
const time = ref()


</script>

<template>
  <div class="monthlyPass_wrapper">
    <!--    <div class="popup_wrapper" v-if="popupToggle">-->
    <!--      <div class="content_wrapper">-->
    <!--        <div class="top_wrapper">-->
    <!--          恭喜获得-->
    <!--          <span>{{ dayDataPayload.amount }}</span>-->
    <!--          桃豆-->
    <!--        </div>-->
    <!--        <div class="day_wrapper">-->
    <!--          交友助力卡福利还剩-->
    <!--          <span>{{ daysLeft }}</span>-->
    <!--          天-->
    <!--        </div>-->
    <!--        <div class="images_wrapper">-->
    <!--          <img src="../../assets/img/img14.png" alt="" class="img1">-->
    <!--          <img src="../../assets/img/img15.png" alt="" class="img2">-->
    <!--        </div>-->
    <!--        <div class="but_wrapper">-->
    <!--          <div @click="popupShow">明日继续</div>-->
    <!--        </div>-->
    <!--        <div class="shutDown_wrapper" @click="popupShow">-->
    <!--          <img src="../../assets/img/img13.png" alt="">-->
    <!--        </div>-->
    <!--      </div>-->
    <!--    </div>-->

    <van-loading type="spinner" color="#1989fa"
                 v-if="loadingShow"
                 style="display: flex;justify-content: center;position: fixed;top: 50%;left: 50%;transform: translate(-50%,-50%);"
    />
    <div class="top_wrapper">
      <div class="nav_wrapper">
        <img src="../../assets/img/left.png" alt="" @click="leftBack">
      </div>
      <img src="../../assets/img/img1.png" alt="" v-if="!vip_toggle"/>
      <img src="../../assets/img/img8.png" alt="" v-else/>
      <span class="rule_wrapper">规则</span>
      <div class="receive_wrapper" v-if="vip_toggle">
        <div class="received_">
          <span>已领取</span>
          <span>{{ claimed }}</span>
        </div>
        <span></span>
        <div class="unclaimed_">
          <span>待领取</span>
          <span>{{ toBeClaimed }}</span>
        </div>
      </div>
    </div>
    <div class="main_wrapper">
      <div class="days_wrapper">
        <div class="day_" v-for="(item, index) in dayData" :key="index">
          <span>第{{ numberData[index] }}天</span>
          <img src="../../assets/img/img5.png" alt="" v-if="item.is_signed"/>
          <img src="../../assets/img/img4.png" alt="" v-else/>
          <div class="progress" v-if="dayData.length !== index + 1"></div>
        </div>
      </div>
      <div class="reward_wrapper">
        <div class="reward_item" v-for="(item, index) in dayData" :key="index">
          <img src="../../assets/img/img2.png" alt="" v-if="!item.is_signed"/>
          <span v-if="!item.is_signed">桃豆x{{ item.amount }}</span>

          <img src="../../assets/img/img11.png" alt="" v-if="item.is_signed"/>
          <span class="text_" v-if="item.is_signed">桃豆x{{ item.amount }}</span>
          <img src="../../assets/img/img9.png" alt="" class="Received" v-if="item.is_signed"/>
        </div>
      </div>
    </div>
    <div class="footer_wrapper" v-if="!vip_toggle">
      <div class="show_wrapper">
        <span>{{ moneyIdParams?.descr }}</span>
        <img src="../../assets/img/img7.png" alt="">
      </div>
      <div class="but_wrapper" @click="submitMoneyChange">
        <img src="../../assets/img/img6.png" alt=""/>
        <span>¥{{ moneyIdParams?.discount_price }} 立即开通</span>
      </div>
    </div>
  </div>
</template>

<style scoped lang="scss">
.monthlyPass_wrapper {
  width: 100vw;
  height: 100vh;
  display: flex;
  flex-direction: column;

  .popup_wrapper {
    width: 100vw;
    height: 100vh;
    position: fixed;
    z-index: 2000;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    justify-content: center;
    align-items: center;

    > .content_wrapper {
      width: 295px;
      height: 338px;
      background: linear-gradient(180deg, #FAFAFF 0%, #E8E9FF 100%);
      box-shadow: inset -1px 1px 1px 0px #FFFFFF;
      border-radius: 20px;
      padding: 40px 20px 20px;
      display: flex;
      flex-direction: column;
      position: relative;

      > .top_wrapper {
        height: 28px;
        width: 100%;
        font-weight: 600;
        font-size: 20px;
        color: #24282F;
        text-align: center;
        font-style: normal;
        margin-bottom: 8px;

        > span {
          font-weight: 600;
          font-size: 20px;
          color: #FF4B83;
          text-align: left;
          font-style: normal;
        }
      }

      > .day_wrapper {
        width: 100%;
        height: 18px;
        font-weight: 400;
        font-size: 13px;
        color: #C8CBD2;
        text-align: center;
        font-style: normal;
      }

      > .images_wrapper {
        display: flex;
        align-items: center;
        justify-content: center;
        position: relative;
        margin-top: 30px;

        > .img1 {
          width: 145px;
          height: 145px;
          vertical-align: middle;
        }

        > .img2 {
          width: 115px;
          height: 115px;
          vertical-align: middle;
          position: absolute;
          top: 50%;
          left: 50%;
          transform: translate(-50%, -50%);
        }
      }

      > .but_wrapper {
        display: flex;
        align-items: center;
        justify-content: center;

        > div {
          width: 255px;
          height: 49px;
          background: linear-gradient(90deg, #9398FC 0%, #9E6EF9 100%);
          border-radius: 25px;
          display: flex;
          align-items: center;
          justify-content: center;
          font-weight: 500;
          font-size: 15px;
          color: #FFFFFF;
          font-style: normal;
        }
      }

      > .shutDown_wrapper {
        position: absolute;
        bottom: -62px;
        left: 50%;
        transform: translate(-50%);

        > img {
          width: 32px;
          height: 32px;
          vertical-align: middle;
        }
      }
    }
  }


  .top_wrapper {
    width: 375px;
    height: 364px;
    position: relative;


    .nav_wrapper {
      width: 375px;
      height: 44px;
      position: absolute;
      display: flex;
      align-items: center;
      padding-left: 15px;
      top: 44px;

      > img {
        width: 32px;
        height: 32px;
        vertical-align: middle;
      }
    }

    > img {
      width: 100%;
      height: 100%;
      background: #39127f;
      vertical-align: middle;
    }

    > .rule_wrapper {
      position: absolute;
      right: 15px;
      top: 56px;
      font-weight: 400;
      font-size: 14px;
      color: #B395E9;
      text-align: right;
      font-style: normal;
    }

    > .receive_wrapper {
      position: absolute;
      top: 143px;
      left: 50%;
      transform: translate(-50%, 0%);
      width: 312px;
      height: 49px;
      background: rgba(255, 255, 255, 0.1);
      border-radius: 12px;
      border: 1px solid rgba(255, 255, 255, 0.2);
      backdrop-filter: blur(10px);
      display: flex;
      align-items: center;
      justify-content: center;

      > span {
        width: 2px;
        height: 29px;
        background: rgba(255, 255, 255, 0.1);
        border-radius: 1px;
        margin: 0 29px 0 36px;
      }

      > div {
        display: flex;
        align-items: center;

        span:first-child {
          font-weight: 500;
          font-size: 12px;
          color: #FFFFFF;
          text-align: left;
          font-style: normal;
          margin-right: 10px;
        }

        span:last-child {
          font-weight: 600;
          font-size: 21px;
          color: #FFF825;
          text-align: left;
          font-style: normal;
        }
      }
    }
  }

  .main_wrapper {
    flex-grow: 1;
    background: #39127f;
    display: flex;
    padding: 0 15px 120px 0;

    .days_wrapper {
      padding: 16px 15px 16px 0;

      .day_ {
        display: flex;
        align-items: center;
        position: relative;
        z-index: 22;

        &:not(:last-child) {
          margin-bottom: 42px;
        }

        > span {
          font-weight: 500;
          font-size: 13px;
          color: #7f5cbc;
          line-height: 18px;
          text-align: right;
          font-style: normal;
          margin-right: 10px;
          width: 70px;
        }

        > img {
          width: 28px;
          height: 28px;
        }

        .progress {
          width: 10px;
          height: 74px;
          background: #502995;
          border-radius: 5px;
          position: absolute;
          top: 8px;
          right: 9px;
          z-index: -22;
        }
      }
    }

    .reward_wrapper {
      display: flex;
      flex-direction: column;
      flex: 1;

      .reward_item {
        //width: 260px;
        //height: 60px;
        padding: 10px 0;
        background: #502995;
        border-radius: 10px;
        display: flex;
        align-items: center;
        justify-content: center;
        position: relative;

        &:not(:last-child) {
          margin-bottom: 10px;
        }

        > img {
          width: 40px;
          height: 40px;
          vertical-align: middle;
          margin-right: 10px;
        }

        > span {
          font-weight: 500;
          font-size: 13px;
          color: #fff825;
          text-align: left;
          font-style: normal;
        }

        .text_ {
          font-weight: 500;
          font-size: 13px;
          color: #7F5CBC;
          text-align: left;
          font-style: normal;
        }

        .Received {
          position: absolute;
          right: 0;
          top: 50%;
          transform: translate(0, -50%);
        }
      }
    }
  }

  .footer_wrapper {
    position: fixed;
    bottom: 36px;
    left: 25px;
    right: 25px;
    z-index: 1000;

    .show_wrapper {
      position: relative;
      top: -15px;
      left: 50%;
      transform: translate(-50%);
      display: flex;
      align-items: center;
      justify-content: center;
      width: 110px;
      height: 31px;
      background: #ff4b83;
      box-shadow: 0px 0 8px 0px rgba(246, 38, 102, 0.2);
      border-radius: 8px;
      font-weight: 500;
      font-size: 12px;
      color: #ffffff;
      line-height: 17px;
      text-align: left;
      font-style: normal;

      > img {
        width: 27px;
        height: 21px;
        vertical-align: middle;
        position: absolute;
        bottom: -12px;
      }
    }

    .but_wrapper {
      width: 325px;
      height: 55px;
      position: relative;

      > img {
        width: 100%;
        height: 100%;
        vertical-align: middle;
      }

      > span {
        font-weight: 500;
        font-size: 15px;
        color: #ffffff;
        text-align: center;
        font-style: normal;
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
      }
    }
  }
}
</style>
